<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华为注册页</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/res.css">
</head>
<body>
    <!-- 抬头 -->
    
    <div class="bittle-cen">
      <!--头部导航 -->
          <div class="bittle">
              <div class="bittle-pic fl">
                  <img src="../img/login-huaweilogo.png" alt="huawei">
              </div>
              <div class="bittle-name fl">
                  <span>|</span>
                  <p>某街商城</p>
              </div>
          </div>
<div class="bittle-big">
        </div>

  </div>
  <div class="bittle-big2"></div>      

          <!-- 中部 -->
        <div class="center">
          <div class="center-cen">
              <p class="center-tit">某街账号注册</p>
              <p class="center-tip">已有账号，去<span><a href="../html/login.html">登陆></a></span>
              </p>
              <div class="res">
                  <div class="form-group">
                      <label for="username" class="tip1">用户名</label>
                      <div class="tip2">
                        <input type="text" name="userName" class="tip3"  placeholder="用户名">
                        <span name="nameSpan" class="spanspan"></span>
                      </div>
                  </div>
                  
                  <div class="form-group">
                      <label for="password" class="tip1">密码</label>
                      <div class="tip2">
                        <input type="password" name="pwd1" class="tip3"  placeholder="密码">
                        <span name="pwdSpan" class="spanspan"></span>
                      </div>
                    </div>

                    <div class="form-group">
                      <label for="password" class="tip1">确认密码</label>
                      <div class="tip2">
                        <input type="password" name="pwd2" class="tip3"  placeholder="确认密码">
                        <span class="spanspan"></span>
                      </div>
                    </div>

                    <div class="form-group">
                      <label for="password" class="tip1">验证码</label>
                      <div class="tip2">
                        <input type="text" class="tip3" id="ac" placeholder="验证码"> <a id="sc"></a><br>
                        <span name="vcSpan" class="spanspan"></span>
                      </div>
                    </div>

                    <div class="form-group">
                      <div class="">
                        <button name="res" class="tip4">注册</button>
                      </div>
                    </div>


              </div>      
                      


                 
          </div>
        </div>
          <!-- 底部 -->
        <div class="bottom">
          <div class="bottom-cen">
            <div class="bottom-cenn">
              <ul>
                  <li class="bottom-li"><a href="#"> 某街账户协议</a></li>
                  <li class="bottom-li"><a href="#"> 某街账户协议</a></li>
                  <li class="bottom-li"><a href="#"> 某街账户协议</a></li>
                  <li class="bottom-li"><a href="#"> 某街账户协议</a></li>

              </ul>
          </div>
          </div>
        </div> 




          <script src="../js/jquery.min.js"></script>
          <script src="../js/tools.js"></script>
      <!-- 注册 -->
          <script>
             console.log($('[name="vcSpan"]'))
            //  $('#sc').html( setVc() )
            // 1, 向 id是 sc 的 a标签写入 验证码内容
            // 点击 标签 可以重新定义 验证码
            $('#sc').html( setVc() ).click( function(){ $(this).html( setVc() ) } );
              // console.log(setVc());
            // 2, 验证 用户名 是否重复
            $('[name="userName"]').blur( function(){
              // 发送ajax请求
              $.ajax({
                url:'../server/goods_select.php',
                type: 'post',
                data: { userName : $(this).val() },
                dataType: 'json',
                success: res=>{
                  // 向账号input后的span写入提示信息
                  if(res.result === 1){
                    $('[name="nameSpan"]').html('<span style="color:blue">用户名可用</span>');
                  }else{
                    $('[name="nameSpan"]').html('用户名重复');
                  }
                }
              })
      
            })
            
            // 3, 注册
            $('[name="res"]').click( ()=>{
                // 生成新的验证码
                $('#sc').html( setVc() )
                console.log(setVc());
               
      
                // 1, 获取数据
      
                // 2, 验证  两个密码相同  两个 验证码 相同
      
                // 两个密码不同 执行 return
                // if( $('[name="pwd1"]').val() !== $('[name="pwd2"]').val() ){
                //   $('[name="pwdSpan"]').html( '两个密码不相同' )
                //   return;
                // }else{
                //   // 输入空字符串 删除输入的错误提示
                //   $('[name="pwdSpan"]').html( '' );
                // }
      
                // input标签中输入的验证码 和 a标签内容的验证码 不同 执行 return
                // 如果不分区大小写 就 统一输入的字符串内容          
                // if( $('#ac').val().toLowerCase() !== $('#sc').html().toLowerCase() ){
                //   $('[name="vcSpan"]').html('验证码不符合');
                //   return;
                // }else{
                //   $('[name="vcSpan"]').html('');
                // }
      
                // 验证都通过 发送 ajax 请求
                $.ajax({
                  url:'../server/goods_res.php',
                  type:'post',
                  data: { userName : $('[name="userName"]').val() ,  userPwd: $('[name="pwd1"]').val() },
                  dataType: 'json',
                  success: res=>{
                    if(res.result === 1){
                        // 注册成功
                        // 先输入注册成功的提示信息
                        $('[name="nameSpan"]').html( '注册成功' );
      
                        // 跳转的同时携带账号密码数据
                        // 方法1: 超链接后传参 账号密码 会显示在浏览器地址栏中  不用
                        // 方法2: cookie  前后端都可以操作 有时效性 删除方便
                        // 方法3: localStorage  可以使用jsonp字符串,一次性储存两个键值对
      
                        // 浏览器本身也有保存账号密码,下次直接登录的功能
      
                        localStorage.setItem( 'login' , JSON.stringify( {userName: $('[name="userName"]').val() , userPwd: $('[name="pwd1"]').val()} ) )
      
                        // 注册成功 跳转登录页面
                        window.location.href = './login.html';
      
                    }
                    
                    if( res.result === 0 ){
                        // 注册失败
                        $('[name="nameSpan"]').html( '注册失败,用户名重复' );
                    }
                  }
                })
      
            })
      
      
          </script>
      
         

   
</body>
</html>